<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 基金信息
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部" name="1"></el-tab-pane>
                <el-tab-pane label="股票型" name="2"></el-tab-pane>
                <el-tab-pane label="混合型" name="3"></el-tab-pane>
                <el-tab-pane label="指数型" name="4"></el-tab-pane>
                <el-tab-pane label="债券型" name="5"></el-tab-pane>
            </el-tabs>
            <div class="handle-box">
                <el-input placeholder="基金名称" v-model="query" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="getData(1)">搜索</el-button>
            </div>
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
            >
                <el-table-column type="index" :index="indexMethod" label="#"></el-table-column>
                <el-table-column prop="id" label="基金编号"></el-table-column>
                <el-table-column prop="name" label="基金简称"></el-table-column>
                <el-table-column prop="registeredCapital" label="资产规模"></el-table-column>
                <el-table-column prop="everyDate" label="日期"></el-table-column>
                <el-table-column prop="netAssetValue" label="单位净值"></el-table-column>
                <el-table-column prop="increases" label="日增长率"></el-table-column>

                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                        >购买</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :page-size="pageSize"
                        :total="pageTotal"
                        @current-change="getData"
                ></el-pagination>
            </div>

            <!-- 购买弹出框 -->
            <el-dialog title="购买" :visible.sync="editVisible" width="30%">
                <el-form ref="form" :model="form" :rules="rules" :refs="form" label-width="100px">
                    <el-form-item label="基金简称">
                        <el-input :disabled="true" v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="单位净值">
                        <el-input :disabled="true" v-model="form.netAssetValue"></el-input>
                    </el-form-item>
                    <el-form-item label="日增长率">
                        <el-input  :disabled="true" v-model="form.increases"></el-input>
                    </el-form-item>
                    <el-form-item prop="money" label="买入金额">
                        <el-input v-model.number="form.money" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')">确 定</el-button>
            </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "FundInfo",
        data() {
            return {
                query: '',
                activeName: '1',
                searchName: '',
                tableData: [
                    {
                        id: 1,
                        name: '测试名字',
                        registeredCapital: 10000.00,
                        everyDate: '2020-3-22',
                        netAssetValue: 1.5230,
                        increases: '0.00290'
                    },{
                        id: 2,
                        name: '测试公司',
                        registeredCapital: 10000.00,
                        everyDate: '2020-3-22',
                        netAssetValue: 1.5230,
                        increases: '0.00290'
                    },{
                        id: 3,
                        name: '测试公司',
                        registeredCapital: 10000.00,
                        everyDate: '2020-3-22',
                        netAssetValue: 1.5230,
                        increases: '0.00290'
                    },
                ],
                multipleSelection: [],
                delList: [],
                editVisible: false,
                pageTotal: 3,
                currentPage: 1,
                pageSize: 10,
                form: {
                    id: 14,
                    name: "华润元大信息传媒",
                    registeredCapital: 10000,
                    everyDate: "2020-03-22",
                    netAssetValue: 0.8558,
                    increases: "2.38%",
                    money: 100.00,
                    username: ''
                },
                rules: {
                    money:[{ required: true, message: '买入金额不能为空'},
                        { type: 'number', message: '买入金额必须为数字值'}]},
                idx: -1,
                id: -1,
                date: '2020-3-22',
                fundType: 'all'
            };
        },
        created() {
           this.getData(1);
        },
        methods: {
            handleClick(tab, event) {
                if (tab.name === '1'){
                    this.fundType = 'all';
                } else if(tab.name === '2'){
                    this.fundType = '股票型';
                } else if(tab.name==='3'){
                    this.fundType = '混合型';
                } else if (tab.name==='4'){
                    this.fundType = '指数型';
                } else if (tab.name==='5'){
                    this.fundType = '债券型';
                }
                this.getData(1);
            },
            indexMethod(index) {
                const _index = index + 1 + (this.currentPage - 1) * this.pageSize;
                return _index;
            },
            // 获取后台的数据
            getData: function (cpage) {
                const _this = this;
                this.currentPage = cpage;
                this.$http.get(`/fund_info/get_all/${this.date}/${cpage}/${this.pageSize}/${this.fundType}?query=${this.query}`).then(function (resp) {
                    console.log(resp);
                    _this.pageTotal = resp.data.total;
                    _this.tableData = resp.data.list;
                    for (let i = 0; i <_this.tableData.length; i++) {
                        _this.tableData[i].increases = (resp.data.list[i].increases*100).toFixed(2) + '%';
                    }
                });
            },
            // 购买操作
            handleEdit(index, row) {
                this.idx = index;
                this.form.id = row.id;
                this.form.name = row.name;
                this.form.registeredCapital= row.registeredCapital;
                this.form.everyDate= row.everyDate;
                this.form.increases=row.increases;
                this.form.netAssetValue=row.netAssetValue;
                this.form.username = localStorage.getItem('ms_username');
                this.editVisible = true;
            },
            //提交购买
            submitForm(form){
                const _this = this;
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        this.$http.post('/purchase',this.form).then(function (resp) {
                            if (resp.data === 'success'){
                                _this.$message.success('购买成功');
                            } else {
                                _this.$message.error('购买失败');
                            }
                            _this.editVisible = false;
                        });
                    } else {
                        return false;
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .textHeader{
        margin-bottom: 20px;
    }

    .textHeader span{
        margin-left: 6px;
        margin-right: 6px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }

</style>